import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { useState, useRef } from 'react';
import { page, remove } from '@/services/system/dict';
import Confirm from '@/components/common/Confirm';
import { Button, Divider, message, } from 'antd';
import { EditOutlined, DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons';
import SystemDictForm from './components/form';

const SystemDict = () => {
  const actionRef = useRef();

  const [formVisible, handleFormVisible] = useState(false);
  const [formValues, handleFormValues] = useState({});

  const handleDelete = (record) => {
    Confirm.delete({
      content: `<p>标签为 <span style="color: #f60"> ${record.label} </span> 的字典信息将被删除</p><p>是否继续？</p>`,
      confirm: () => {
        remove(record.id).then((data) => {
          if (data.success) {
            if (actionRef.current) actionRef.current.reload();
            message.success('删除成功!');
          } else {
            message.error('删除失败!');
          }
        });
      },
    });
  };

  const handleRaise = () => {
    handleFormValues({sort: 1});
    handleFormVisible(true);
  }

  const handleModify = (record) => {
    handleFormValues(record);
    handleFormVisible(true);
  }

  const handleRaiseChildren = (record) => {
    handleFormValues({parentId: record.id, parentLabel: record.label, sort: 1});
    handleFormVisible(true);
  }

  const columns = [
    { title: '字典标签', dataIndex: 'label',  },
    { title: '字典键值', dataIndex: 'value' },
    { title: '字典排序', dataIndex: 'sort' },
    { title: '备注', dataIndex: 'remark' },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: 300,
      render: (_, record) => {
        return (
          <>
            <a onClick={() => { handleRaiseChildren(record) }}> <PlusCircleOutlined/> 新增下级字典 </a>
            <Divider type="vertical" />
            <a onClick={() => { handleModify(record); }}> <EditOutlined/> 修改 </a>
            <Divider type="vertical" />
            <a onClick={() => { handleDelete(record) }}> <DeleteOutlined/> 删除 </a>
          </>
        );
      },
    },
  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle={`字典信息查询列表`}
        rowKey="id"
        actionRef={actionRef}
        toolBarRender={() => [
          <Button type="primary" onClick={() => { handleRaise(); }}> 新建 </Button>,
        ]}
        request={ (params) => {
          return page(params);
        }}
        search={false}
        columns={columns}
        pagination={{ pageSize: 10 }}
      /> 

      {
        formVisible && 
        <SystemDictForm 
          onSubmit={() => {
            if (actionRef.current) actionRef.current.reset();
            handleFormVisible(false);
          }}
          onCancel={() => {
            handleFormVisible(false);
          }}
          formVisible={formVisible}
          values={formValues}
        />
      }
    </PageContainer>
  );
};

export default SystemDict;


